<template>
	<view class="pay-order">
		<view class="address-box" @click="chooseAddress">
			<view class="left "><text class="cuIcon-locationfill"></text></view>
			<view class="center">
				<view class="">
					<text class="name">{{ addressInfo.userName || userInfo.name }}</text>
					<text class="phone">{{ addressInfo.phone || '-' }}</text>
				</view>
				<view class="address">{{ addressInfo.fullAddress || '-' }}</view>
			</view>
			<view class="right"><text class="cuIcon-right"></text></view>
		</view>
		<view class="order-detail">
			<view class="order-info">
				<view class="title-bar">
					<image class="store-logo" :src="getImagePath(orderInfo.image)" mode="aspectFill" v-if="orderInfo.image"></image>
					<text class="store-logo cuIcon-shop" v-else></text>
					<text class="store-name">{{ orderInfo.store_name ? orderInfo.store_name : orderInfo.name || '' }}</text>
				</view>
				<view class="goods-list">
					<view class="goods-item" v-for="goods in orderInfo.goodsList">
						<image
							class="goods-image"
							:src="goods.goods_image ? getImagePath(goods.goods_image) : goods.image ? getImagePath(goods.image) : '../static/doctor_default.png'"
							mode=""
						></image>
						<view class="content">
							<view class="goods-name">{{ goods.name?goods.name:goods.goods_desc ? goods.goods_desc:'' }}</view>
						</view>
						<view class="num">
							<view class="price">
								<text class="money-operate">￥</text>
								{{ goods.unit_price ? goods.unit_price : goods.price || '' }}
							</view>
							<view class="amount">x{{ goods.goods_amount ? goods.goods_amount : goods.car_num || '' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="handler-bar">
			<text class="amount">共{{ totalAmount }}件</text>
			<text class="text">合计:</text>
			<text class="money-amount">
				<text class="money-operate">￥</text>
				<text>{{ totalMoney }}</text>
			</text>
			<button class="cu-btn bg-gradual-orange round" @click="submitOrder" v-if="orderInfo.order_state === '待提交'">提交订单</button>
			<button
				class="cu-btn bg-gradual-orange round"
				@click="toPay"
				v-if="orderInfo.order_state === '待支付' && (orderInfo.pay_state === '取消支付' || orderInfo.pay_state === '待支付')"
			>
				付款
			</button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			orderNo: '', //订单编号
			orderInfo: {},
			addressInfo: {
				fullAddress: '陕西省西安市雁塔区太白南路'
			}
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			loginUserInfo: state => state.user.loginUserInfo,
			cartInfo: state => state.order.cartInfo
		}),
		totalAmount() {
			if (Array.isArray(this.orderInfo.goodsList)) {
				return this.orderInfo.goodsList.reduce((pre, cur) => {
					if (cur.goods_amount) {
						pre += cur.goods_amount;
					}
					if (cur.car_num) {
						pre += cur.car_num;
					}
					return pre;
				}, 0);
			}
		},
		totalMoney() {
			if (Array.isArray(this.orderInfo.goodsList)) {
				return this.orderInfo.goodsList.reduce((pre, cur) => {
					if (cur.goods_amount && cur.unit_price) {
						pre += cur.goods_amount * cur.unit_price;
					} else if (cur.price && cur.car_num) {
						pre += cur.car_num * cur.price;
					}
					return pre;
				}, 0);
			}
		}
	},
	methods: {
		updateOrderState(order_state, pay_state, prepay_id) {
			let req = [
				{
					serviceName: 'srvhealth_store_order_update',
					condition: [{ colName: 'id', ruleType: 'eq', value: this.orderInfo.id }],
					data: [{ order_state: order_state }, { pay_state: pay_state }]
				}
			];
			if (prepay_id) {
				req[0].data.push({
					prepay_id: prepay_id
				});
			}
			this.$fetch('operate', 'srvhealth_store_order_update', req, 'health').then(res => {
				;
			});
		},
		chooseAddress() {
			let self = this;
			// #ifdef MP-WEIXIN
			uni.chooseAddress({
				success(res) {
					self.addressInfo = res;
					self.addressInfo.phone = res.telNumber; // 手机号
					self.addressInfo.fullAddress = res.provinceName + res.cityName + res.countyName + res.detailInfo;
				}
			});
			// #endif
		},
		async getOrderInfo() {
			let req = {
				condition: [{ colName: 'order_no', ruleType: 'in', value: this.orderNo }]
			};
			let orderInfo = await this.$fetch('select', 'srvhealth_store_order_select', req, 'health');
			if (orderInfo && orderInfo.success && orderInfo.data.length > 0) {
				this.orderInfo = orderInfo.data[0];
				if (this.orderInfo.order_state === '待支付' && this.orderInfo.pay_state === '取消支付') {
					uni.setNavigationBarTitle({
						title: '等待买家付款'
					});
				}
				let goods = await this.getGoodsList();
				return this.orderInfo;
			}
		},
		async getGoodsList() {
			let req = {
				condition: [{ colName: 'order_no', ruleType: 'in', value: this.orderNo }]
			};
			let goodsList = await this.$fetch('select', 'srvhealth_store_order_goods_detail_select', req, 'health');
			if (goodsList.success) {
				this.$set(this.orderInfo, 'goodsList', goodsList.data);
			}
		},
		submitOrder() {
			let req = [
				{
					serviceName: 'srvhealth_store_order_add',
					condition: [],
					data: [
						{
							store_no: this.orderInfo.store_no,
							store_name: this.orderInfo.name,
							image: this.orderInfo.image,
							type: this.orderInfo.type,
							rcv_addr_str: this.addressInfo.fullAddress,
							rcv_name: this.addressInfo.userName,
							rcv_telephone: this.addressInfo.telNumber,
							person_no: this.userInfo.no,
							person_name: this.userInfo.name,
							user_account: this.userInfo.userno,
							nick_name: this.userInfo.nick_name?this.userInfo.nick_name.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, ""):'',
							profile_url: this.userInfo.profile_url,
							user_image: this.userInfo.user_image,
							sex: this.userInfo.sex,
							user_role: this.userInfo.user_role,
							order_amount: this.totalMoney,
							order_remark: '订单备注',
							pay_state: '待支付',
							order_state: '待支付',
							child_data_list: [
								{
									serviceName: 'srvhealth_store_order_goods_detail_add',
									condition: [],
									depend_keys: [{ type: 'column', add_col: 'order_no', depend_key: 'order_no' }],
									data: this.orderInfo.goodsList.map(item => {
										let obj = {
											food_no: item.meal_no?item.meal_no:item.goods_no,
											goods_amount: item.car_num,
											goods_desc: item.name,
											store_no: this.orderInfo.store_no,
											sum_price: item.car_num * item.unit_price,
											unit_price: Number(item.price)
										};
										if (item.image) {
											obj.goods_image = item.image;
										}
										if (item.goods_image) {
											obj.goods_image = item.goods_image;
										}
										if (item.goods_img) {
											obj.goods_image = item.goods_img;
										}
										return obj;
									})
								}
							]
						}
					]
				}
			];
			
			this.$fetch('operate', 'srvhealth_store_order_add', req, 'health').then(res => {
				if (res.success && Array.isArray(res.data) && res.data.length > 0) {
					console.log(res.data[0]);
					this.orderNo = res.data[0].order_no;
					this.getOrderInfo().then(data => {
						this.toPay();
					});
				}
			});
		},
		async toPay() {
			let self = this;
			let orderData = this.deepClone(this.orderInfo);
			let goodsData = this.deepClone(this.orderInfo.goodsList);
			if (typeof this.totalMoney !== 'number' || this.totalMoney.toString() === 'NaN') {
				uni.showModal({
					title: '提示',
					content: '订单状态有误',
					showCancel: false
				});
				return;
			}
			let result = {};
			if (orderData.prepay_id) {
				result.prepay_id = orderData.prepay_id;
			} else {
				result = await this.toPlaceOrder(
					this.totalMoney ? this.totalMoney : 1,
					this.loginUserInfo && this.loginUserInfo.login_user_type ? this.loginUserInfo.login_user_type : '',
					orderData
				);
			}
			if (result && result.prepay_id) {
				let res = await this.getPayParams(result.prepay_id);
				wx.requestPayment({
					timeStamp: res.timeStamp.toString(),
					nonceStr: res.nonceStr,
					package: res.package,
					signType: 'MD5',
					paySign: res.paySign,
					success(res) {
						// 支付成功
						self.orderInfo.order_state = '待发货';
						self.updateOrderState('待发货', '已支付', result.prepay_id);
						self.orderInfo.pay_state = '已支付';
						uni.redirectTo({
							url: '/personalPages/successPay/successPay?order_no=' + orderData.order_no + '&totalMoney=' + self.totalMoney
						});
					},
					fail(res) {
						// 支付失败/取消支付
						self.orderInfo.pay_state = '取消支付';
						self.updateOrderState('待支付', '取消支付', result.prepay_id);
					}
				});
			}
		}
	},
	created() {
		console.log('$route.query',this.$route.query)
	},
	onLoad(option) {
		if (option.store_no && option.goods_info) {
			if (this.cartInfo[option.store_no]) {
				this.orderInfo = this.cartInfo[option.store_no].storeInfo;
				option.goods_info = JSON.parse(decodeURIComponent(option.goods_info));
				if (!option.goods_info.car_num) {
					option.goods_info.car_num = 1;
				}
				this.orderInfo.goodsList = [option.goods_info];
				if (!this.orderInfo.order_state && !this.orderInfo.pay_state) {
					this.orderInfo.order_state = '待提交';
					this.orderInfo.pay_state = '待支付';
				}
			}
		} else if (option.store_no) {
			// 从购物车进入 还未生成订单
			if (this.cartInfo[option.store_no] && Array.isArray(this.cartInfo[option.store_no].cart)) {
				this.orderInfo = this.cartInfo[option.store_no].storeInfo;
				this.orderInfo.goodsList = this.cartInfo[option.store_no].cart.map(item => {
					if (!item.car_num) {
						item.car_num = 1;
					}
					return item;
				});
				this.orderInfo.order_state = '待提交';
				this.orderInfo.pay_state = '待支付';
			}
		} else if (option.order_no) {
			this.orderNo = option.order_no;
			this.getOrderInfo();
		}
	}
};
</script>

<style lang="scss" scoped>
.pay-order {
	height: calc(100vh - var(--window-top));
	display: flex;
	flex-direction: column;
	.address-box {
		margin: 20rpx;
		padding: 20rpx;
		display: flex;
		background-color: #fff;
		border-radius: 10px;
		align-items: center;
		.left {
			height: 50px;
			width: 50px;
			text-align: center;
			line-height: 50px;
			font-size: 30px;
			background: linear-gradient(#ff9700, #ed1c24);
			color: #fff;
			border-radius: 50px;
		}
		.center {
			flex: 1;
			padding: 20rpx;
			.name {
				line-height: 30px;
				font-size: 16px;
				font-weight: bold;
			}
		}
		.right {
			font-size: 20px;
			color: #999;
		}
	}
	.order-detail {
		flex: 1;
	}
	.order-info {
		margin: 20rpx;
		margin-top: 0;
		background-color: #fff;
		padding: 20rpx 20rpx 40rpx;
		border-radius: 10px;
		.title-bar {
			padding: 20rpx 0 30rpx;
		}
		.store-logo {
			width: 20px;
			height: 20px;
		}
		.store-name {
			font-weight: bold;
			margin-left: 10rpx;
		}
		.goods-item {
			display: flex;
			& + .goods-item {
				margin-top: 20px;
			}
			.goods-image {
				width: 100rpx;
				height: 100rpx;
				background-color: #f1f1f1;
				border-radius: 5px;
			}
			.content {
				flex: 1;
				padding: 0 20rpx;
				font-weight: bold;
			}
			.num {
				width: 100px;
				text-align: right;
				margin-bottom: 5px;
				.price {
					font-weight: bold;
					color: #f76260;
					font-size: 18px;
					margin-bottom: 5px;
					.money-operate {
						font-size: 12px;
					}
				}
				.amount {
					font-size: 12px;
					color: #999;
				}
			}
		}
	}
	.handler-bar {
		background-color: #fff;
		height: 50px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 20rpx;
		.amount {
			font-size: 12px;
			color: #999;
			margin-right: 10px;
		}
		.text {
			font-weight: bold;
		}
		.money-amount {
			padding-right: 10px;
			font-size: 18px;
			color: orange;
			.money-operate {
				font-size: 12px;
			}
		}
	}
}
</style>
